<template>
  <div class="body">
    <div class="thm">
      <div class="tx" :style="{ backgroundImage: 'url(' + this.txUrl + ')' }">
        <i class="el-icon-user-solid mrt" v-if="this.txUrl == ''"></i>
      </div>
      <div class="mz">{{ userName }}&nbsp;</div>
    </div>
    <div class="xn">
      <div class="xb"><i class="el-icon-user-solid"></i>性别：{{ sex }}<i class="el-icon-female"
          v-if="sex == 'female'"></i><i class="el-icon-male" v-if="sex == 'male'"></i></div>
      <div class="nl"><i class="el-icon-s-custom"></i>年龄：{{ age }}</div>
    </div>
    <div class="gxq"><i class="el-icon-edit"></i>个性签名:&nbsp;{{ signature }}</div>
    <div class="zj">
      <div class="zjw">我的足迹</div>
      <button @click="handleResetClick()" class="resetBtn">复位</button>
      <div class="zjt">
        <div id="map" style="height: 100%;"></div>
      </div>
    </div>
    <div class="dt">
      <div class="dtw">我的动态</div>
      <div class="dtt">
        <el-timeline :reverse="reverse">
          <el-timeline-item size="large" v-for="(visit, index) in visits" :key="index" :timestamp="visit.date">
            {{ visit.scene }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
<script>
import { BMPGL } from "../../../bmpgl.js"
import axios from "axios";
export default {
  data() {
    return {
      reverse: true,
      ak: "7lZ559WeX7j6Fyg2ykx4U1rlsgK1RSJp",
      userId: this.$route.params.userId,
      userName: "",
      txUrl:
        "",
      age: "",
      sex: "",
      signature: "",
      myFootprint: [],
      map: null,
      centerPoint: null,
      visits: [],
    };
  },
  methods: {
    initMap() {
      // 传入密钥获取地图回调。
      BMPGL(this.ak).then((BMapGL) => {
        // 创建地图实例
        this.map = new BMapGL.Map("map");
        this.map.setMapStyleV2({ styleId: '70890e8dc534e62034fb48de2ca700fe' })
        // 创建点坐标 axios => res 获取的初始化定位坐标
        this.centerPoint = new BMapGL.Point(105.403119, 38.028658)
        this.map.centerAndZoom(this.centerPoint, 5);
        //开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true)
        // map.setHeading(64.5)
        // map.setTilt(73)
        // 保存数据
        // this.myMap = map

        var dist = new BMapGL.DistrictLayer({
          name: this.myFootprint,
          kind: 2,
          fillColor: '#e0e0e0',
          fillOpacity: 0.2
        });
        this.map.addDistrictLayer(dist);
      })
        .catch((err) => {
          console.log(err)
        })

    },
    handleResetClick() {
      this.map.centerAndZoom(this.centerPoint, 5);
    }
  },
  mounted() {
    let _this = this;
    const axios = require("axios");
    let data = JSON.stringify({
      "userID": _this.userId,
    });
    let config = {
      method: "post",
      maxBodyLength: Infinity,
      url: "http://8.134.215.31:11112/userMessage/get",
      headers: {
        "Content-Type": "application/json",
        "token": localStorage.getItem("JWT_TOKEN"),
      },
      data: data,
    };
    axios
      .request(config)
      .then((response) => {
        console.log(response.data);
        _this.userName = response.data.data.username;
        _this.txUrl = response.data.data.txUrl;
        _this.sex = response.data.data.sex;
        _this.age = response.data.data.age;
        _this.signature = response.data.data.signature;
        _this.myFootprint = response.data.data.footprint;
        _this.visits = response.data.data.visits;
        const param1 = _this.userId;
        const param2 = _this.txUrl;
        const param3 = _this.$route.name;
        const param4 = _this.userName;
        _this.$emit("childEvent", { param1, param2, param3, param4 });

        this.initMap();

      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>
<style scoped>
.body {
  overflow: hidden;
  user-select: none;
}

.thm {
  position: relative;
  height: 80px;
  width: 60%;
  margin: 50px auto;
  margin-bottom: 20px;
}

.tx {
  position: absolute;
  height: 100%;
  width: 80px;
  border-radius: 40px;
  background-size: 100% 100%;
  font-size: 30px;
  border: 1px rgba(74, 82, 89) solid;
}

.tx:hover {
  cursor: pointer;
}

.mz {
  position: absolute;
  left: 100px;
  top: 0;
  height: 100%;
  width: 70%;
  line-height: 80px;
  font-size: 25px;
}

.xn {
  position: relative;
  width: 60%;
  height: 40px;
  margin: 0 auto;
  margin-bottom: 20px;
  line-height: 40px;
}

.xb {
  position: absolute;
  height: 100%;
  width: 25%;
}

.nl {
  position: absolute;
  left: 20%;
  height: 100%;
  width: 30%;
}

.gxq {
  width: 60%;
  height: 70px;
  margin: 0 auto;
}

.zj {
  width: 60%;
  margin: 0 auto;
  height: 700px;
}

.zjw {
  height: 10%;
  width: 100%;
  line-height: 60px;
  font-size: 30px;
  font-weight: bold;
}

.zjt {
  height: 90%;
  width: 100%;
  /* background-color: pink; */
}

.dt {
  width: 60%;
  margin: 50px auto;
  height: auto;
  min-height: 660px;
}

.dtw {
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 30px;
  font-weight: bold;
}

.dtt {
  width: 100%;
  height: auto;
  min-height: 300px;
  border-radius: 10px;
  border: 1px rgba(128, 128, 128, 0.406) solid;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.mrt {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  line-height: 80px;
  text-align: center;
  color: rgba(74, 82, 89);
}

.resetBtn {
  position: relative;
  left: 15px;
  top: 30px;
  width: 60px;
  z-index: 100;
}

.resetBtn:hover {
  cursor: pointer;
  color: #4a5259;
}

.el-timeline {
  margin-top: 50px;
}
</style>
